<template>
  <div>
    <el-card class="box-card">
      <Echart :chartData="barData" style="height: 280px" />
    </el-card>
    <el-card class="box-card">
      <Echart :chartData="lineData" style="height: 280px" />
    </el-card>
    <el-card class="box-card">
      <Echart :chartData="pieData" style="height: 280px" :isAxisChart="false" />
    </el-card>
    <el-card class="box-card">
      <Echart :chartData="kData" style="height: 280px" />
    </el-card>
  </div>
</template>

<script>
import Echart from "@/components/Echart.vue"
export default {
  name: "",
  data() {
    return {
      barData: {
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
      lineData: {
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
          {
            data: [6, 24, 54, 575, 224, 45, 110],
            type: "line",
          },
        ],
      },
      pieData: {
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      kData: {
        xAxis: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
        series: [
          {
            type: "k",
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42],
            ],
          },
        ],
      },
    }
  },
  components: {
    Echart,
  },
}
</script>
<style lang="less" scoped>
.box-card {
  display: inline-block;
  width: 480px;
  height: 300px;
}
</style>
